<template>
    <view class="page">
        <view class="content">
            <u-form labelPosition="left"
                    labelWidth="90"
                    :model="form"
                    :rules="rules"
                    ref="uForm">

                <u-form-item label="房源设置" prop="type">
                    <u-radio-group v-model="form.type" placement="row">
                        <u-radio label="默认房源" name="2"></u-radio>
                        <u-radio label="选择房源" name="1"></u-radio>
                    </u-radio-group>
                </u-form-item>

                <!--<u-form-item borderBottom v-if="parseInt(form.type)===1" @click="clickOrigin">-->
                    <!--<text style="color: #2979ff" v-if="houseCollection.length <= 0">请选择房源 > </text>-->
                    <!--<text style="color: #2979ff" v-else>已选择 {{houseCollection.length}} 套 </text>-->
                    <!--<SelectHouseOrigin :list="subSellHouseList" :show="originShow"-->
                          <!--@selectFilter="selectFilter" @confirm="originConfirm" @cancel="cancelOrigin"></SelectHouseOrigin>-->
                <!--</u-form-item>-->

                <u-form-item>
                    <view style="display: flex; flex-direction: row; justify-content: space-between;align-items: center">
                        <text style="color: #303133; font-size: 15px">是否开启佣金补贴</text>
                        <u-switch v-model="is_commission" activeColor="#5ac725"></u-switch>
                    </view>
                </u-form-item>

                <u-form-item label="佣金比例" v-if="is_commission" prop="commission_percentage" borderBottom @click="clickCommission">
                    <u--input v-model="form.commission_percentage" placeholder="请选择" disabled disabledColor="#ffffff" border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                    <input-picker :show="commissionShow" @confirm="commissionConfirm" @cancel="cancelCommission"></input-picker>
                </u-form-item>

                <u-form-item label="招租信息" prop="rent_msg" borderBottom>
                    <u--textarea v-model="form.rent_msg" placeholder="请输入内容" border="none"></u--textarea>
                </u-form-item>

                <u-form-item label="费用说明" prop="cost_msg" borderBottom>
                    <u--textarea v-model="form.cost_msg" placeholder="请输入内容" border="none"></u--textarea>
                </u-form-item>

                <u-form-item label="租期" prop="lease_term" borderBottom>
                    <u-input v-model="form.lease_term" border="none" placeholder="请输入租期">
                        <u--text text="个月" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
                    </u-input>
                </u-form-item>

                <u-form-item label="缴费方式" prop="payTypeText" borderBottom @click="clickPayType">
                    <u--input v-model="payTypeText" placeholder="请选择" disabled disabledColor="#ffffff" border="none"></u--input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                    <u-picker :show="showPayType" :columns="payTypeColumns" keyName="label" @confirm="payTypeConfirm" @cancel="cancelPayType"></u-picker>
                </u-form-item>

                <u-form-item prop="room_facilities_id" borderBottom>
                    <!--<view style="overflow-x:scroll">-->
                        <!--<u-checkbox-group v-model="form.room_facilities_id" placement="row">-->
                            <!--<u-checkbox v-for="(item,index) in roomData" :label="item.name" :name="item.id" :key="index"></u-checkbox>-->
                        <!--</u-checkbox-group>-->
                    <!--</view>-->

                    <view style="display: flex;flex-direction: column">
                        <text style="color: #303133; font-size: 15px">公共设施</text>
                        <view style="display: flex;flex-direction: row; flex-wrap: wrap;">
                            <view class="u-page__tag-item" v-for="(item, index) in roomData" :key="index">
                                <u-tag :text="item.text" :plain="!item.checked" type="primary" :name="index" @click="roomClick"></u-tag>
                            </view>
                        </view>
                    </view>
                </u-form-item>

                <u-form-item prop="public_room_facilities_id" borderBottom>
                    <view style="display: flex;flex-direction: column">
                        <text style="color: #303133; font-size: 15px">房间设施</text>
                        <view style="display: flex;flex-direction: row; flex-wrap: wrap;">
                            <view class="u-page__tag-item" v-for="(item, index) in publicData" :key="index">
                                <u-tag :text="item.text" :plain="!item.checked" type="primary" :name="index" @click="publicClick"></u-tag>
                            </view>
                        </view>
                    </view>
                </u-form-item>

                <u-form-item>
                    <view style="display: flex; flex-direction: row; justify-content: space-between;align-items: center">
                        <text style="color: #303133; font-size: 15px">是否开启现金补贴</text>
                        <u-switch v-model="isSubsidy" activeColor="#5ac725"></u-switch>
                    </view>
                </u-form-item>

                <u-form-item label="现金补贴" v-if="isSubsidy" prop="subsidy" borderBottom @click="clickSubsidy">
                    <u-input v-model="form.subsidy" placeholder="请选择" disabled disabledColor="#ffffff" border="none"></u-input>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                    <subsidy-picker :show="subsidyShow" @confirm="subsidyConfirm" @cancel="subsidyCancel"></subsidy-picker>
                </u-form-item>

            </u-form>
            <u-gap height="20"></u-gap>
            <u-row>
                <u-button type="primary" v-if="parseInt(form.type)===2" text="发布" @click="submitHandler"></u-button>
                <u-button type="primary" v-else text="下一步" @click="nextHandler"></u-button>
            </u-row>
        </view>
        <view class="safe-area-inset-bottom"></view>
    </view>
</template>

<script>
    import inputPicker from '../../../components/input-picker';
    import subsidyPicker from '../../../components/subsidy-picker';
    import SelectHouseOrigin from './components/SelectHouseOrigin';
    export default {
        name:"subsell",
        components:{
            inputPicker,
            SelectHouseOrigin,
            subsidyPicker
        },
        onLoad(){
            this.getPublicAndRoomAreaData();
            // this.getSubSellHouseList();
        },
        data() {
            return {
                showPayType:false,
                commissionShow:false,
                originShow:false,
                publicData:[],
                roomData:[],
                payTypeText:'',
                subSellHouseList:[],
                // houseCollection:[],
                payTypeColumns:[
                    [{label: '押一', id: 1}, {label: '押二', id: 2}, {label: '押三', id: 3}, {label: '押四', id: 4}, 
                        {label: '押五', id: 5}, {label: '押六', id: 6}, {label: '押十二', id: 7},],
                    [{label: '付一', id: 1}, {label: '付二', id: 2}, {label: '付三', id: 3}, {label: '付四', id: 4},
                        {label: '付五', id: 5}, {label: '付六', id: 6}, {label: '付十二', id: 7},]
                ],
                form:{
                    type:'2',
                    commission_percentage:'',
                    rent_msg:'',
                    cost_msg:'',
                    lease_term:'',
                    deposit:'',
                    cope_with:'',
                    room_facilities_id:[],
                    public_room_facilities_id:[],

                    // 现金补贴
                    subsidy:'',
                },
                rules:{
                    type: [{required: true, message: '请选择房源设置', trigger: ['blur', 'change']}],
                    commission_percentage: [{required: true, message: '请选择房佣金比例', trigger: ['blur', 'change']}],
                    rent_msg: [{required: true, message: '请选择招租信息', trigger: ['blur', 'change']}],
                    cost_msg: [{required: true, message: '请选择费用说明', trigger: ['blur', 'change']}],
                    lease_term: [{required: true, message: '请选择租期', trigger: ['blur', 'change']}],
                    // payTypeText: [{required: true, message: '请选择缴费方式', trigger: ['blur', 'change']}],
                    room_facilities_id: [{type:'array',required: true, message: '请选择房间设施', trigger: ['blur', 'change']}],
                    public_room_facilities_id: [{type:'array',required: true, message: '请选择公共设施', trigger: ['blur', 'change']}],
                },
                isSubsidy: false,  //是否开启补贴
                subsidyShow: false, // 开启补贴弹框
                s_id:'',
                type:'',

                is_commission: false, //是否开启佣金补贴

                defaultPayTypeIndex:[0,0]
            }
        },
        methods: {
            getSubSellHouseList(){
                // let u_id = uni.getStorageSync('u_id');
                // uni.$u.http.get('/api.php/house/house_distribution_list',
                //     {params: {u_id: u_id}}).then(res => {
                //     this.subSellHouseList = res;
                // });
                let data = {u_id: uni.getStorageSync('u_id'), s_id: this.s_id, type: this.type};
                uni.$u.http.get('/api.php/house/wait_distribution_house'  + uni.$u.queryParams(data)).then(res => {
                    let array = [];
                    for (let i = 0; i < res.length; i++) {
                        for (let j = 0; j < res[i].h_date.length; j++) {
                            array.push(res[i].h_date[j]);
                        }
                    }
                    this.subSellHouseList = array;
                });
            },
            getPublicAndRoomAreaData() {
                uni.$u.http.get('/api.php/house/house_facilities').then(res => {
                    for (let i = 0; i < res.length; i++) {
                        if (res[i].type === 1){
                            this.publicData.push({text: res[i].name, id: res[i].id, checked: false});
                        }else if(res[i].type === 2){
                            this.roomData.push({text: res[i].name, id: res[i].id, checked: false});
                        }
                    }
                });
            },

            originConfirm(e){
                this.form.houseCollection = e;
                this.cancelOrigin();
            },
            clickOrigin(){
                this.originShow = true;
                uni.hideKeyboard();
            },
            cancelOrigin(){
                this.originShow = false;
            },

            commissionConfirm(e){
                this.form.commission_percentage = e;
                this.cancelCommission();
            },
            clickCommission(){
                this.commissionShow = true;
                uni.hideKeyboard();
            },
            cancelCommission(){
                this.commissionShow = false;
            },
            payTypeConfirm(e){
                this.defaultPayTypeIndex = e.indexs;

                this.form.deposit = this.payTypeColumns[0][e.indexs[0]].id;
                this.form.cope_with = this.payTypeColumns[1][e.indexs[1]].id;
                this.payTypeText = this.payTypeColumns[0][e.indexs[0]].label + '/' +
                    this.payTypeColumns[1][e.indexs[1]].label;
                this.cancelPayType();
            },

            // 现金补贴弹框
            subsidyConfirm(e){
                this.form.subsidy = e;
                this.subsidyCancel();
            },
            clickSubsidy(){
                this.subsidyShow = true;
                uni.hideKeyboard();
            },
            subsidyCancel(){
                this.subsidyShow = false;
            },

            // 付款方式
            clickPayType(){
                this.showPayType = true;
                uni.hideKeyboard();
            },
            cancelPayType(){
                this.showPayType = false;
            },
            // selectFilter(val){
            //     if(val.s_id === '' || val.s_id){
            //         this.s_id = val.s_id
            //     }
            //     if(val.type === '' ||  val.type){
            //         this.type = val.type;
            //     }
            //     this.getSubSellHouseList();
            // },
            // 房间设施
            roomClick(name){
                this.roomData[name].checked = !this.roomData[name].checked;

                this.form.room_facilities_id = [];
                for (let i = 0; i < this.roomData.length; i++) {
                    if (this.roomData[i].checked) {
                        this.form.room_facilities_id.push(this.roomData[i].id)
                    }
                }
            },

            // 公共设施
            publicClick(name) {
                this.publicData[name].checked = !this.publicData[name].checked;

                this.form.public_room_facilities_id = [];
                for (let i = 0; i < this.publicData.length; i++) {
                    if (this.publicData[i].checked) {
                        this.form.public_room_facilities_id.push(this.publicData[i].id)
                    }
                }
            },

            submitHandler(){
                this.$refs.uForm.validate().then(res => {
                    let u_id = uni.getStorageSync('u_id');
                    let data = uni.$u.deepClone(this.form);

                    data.u_id = u_id;
                    data.h_id = 0;
                    data.room_facilities_id = JSON.stringify(this.form.room_facilities_id);
                    data.public_room_facilities_id = JSON.stringify(this.form.public_room_facilities_id);
                    data.is_subsidy = this.isSubsidy ? 2 : 1;
                    data.is_commission = this.is_commission ? 1 : 0;

                    uni.showLoading({title: '正在发布'});
                    uni.$u.http.post('/api.php/house/house_distribution', [data]).then(res => {
                        uni.hideLoading();
                        uni.showToast({
                            title: '添加成功', //提示文字
                            duration: 1000, //显示时长
                            icon: "success", //图标，支持"success"、"loading"
                            success:function () {
                                uni.navigateBack({delta: 1});
                            }
                        });
                    });
                }).catch(errors => {
                    uni.$u.toast('校验失败')
                });
            },

            nextHandler(){
                this.$refs.uForm.validate().then(res => {
                    let data = uni.$u.deepClone(this.form);
                    data.room_facilities_id = JSON.stringify(this.form.room_facilities_id);
                    data.public_room_facilities_id = JSON.stringify(this.form.public_room_facilities_id);
                    data.publicData = JSON.stringify(this.publicData);
                    data.roomData = JSON.stringify(this.roomData);
                    data.is_subsidy = this.isSubsidy ? 2 : 1;
                    data.is_commission = this.is_commission ? 1 : 0;
                    data.defaultPayTypeIndex = JSON.stringify(this.defaultPayTypeIndex);

                    uni.navigateTo({url: '/pages/landlord/index/custom' + uni.$u.queryParams(data)});
                }).catch(errors => {
                    uni.$u.toast('校验失败')
                });
            },
        }
    }
</script>

<style scoped>
    .page {
        width: 100%;
        min-height: 100vh;
        background-color: #ffffff;
    }

    .content {
        padding: 20rpx;
    }

    /deep/ .u-text {
        padding: 20rpx;
        background-color: #f3f4f6;
    }

    /deep/ .u-radio {
        margin-right: 16px;
    }

    /deep/ .u-checkbox {
        margin-right: 16px;
    }
    .u-page__tag-item {
        margin-right: 20px;
        margin-top: 20rpx;
    }
</style>